import 'package:ceramics/extensions/ab_widget_extensions.dart';
import 'package:ceramics/model/ab_singleton.dart';
import 'package:ceramics/model/ab_works.dart';
import 'package:ceramics/pages/main/home/ab_boost_dialog.dart';
import 'package:ceramics/pages/main/home/ab_boost_success_dialog.dart';
import 'package:ceramics/pages/main/home/ab_home_page.dart';
import 'package:ceramics/pages/main/mine/ab_coin_shop_page.dart';
import 'package:ceramics/styles/ab_styles.dart';
import 'package:ceramics/util/ab_alert.dart';
import 'package:ceramics/util/ab_api.dart';
import 'package:ceramics/util/ab_loading.dart';
import 'package:ceramics/widgets/ab_image.dart';
import 'package:ceramics/widgets/ab_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ABHomeWorksItem extends StatelessWidget {
  final ABWorks works;
  final int? idx;
  final _idxImageMap = const {
    0: "images/ceramics_75.webp",
    1: "images/ceramics_86.webp",
    2: "images/ceramics_76.webp",
    3: "images/num4.png",
    4: "images/num5.png",
  };

  const ABHomeWorksItem({super.key, required this.works, this.idx});

  @override
  Widget build(BuildContext context) {
    var rankImage = _idxImageMap[idx];
    return LayoutBuilder(
      builder: (context,constraint) {
        return Stack(
          children: [
            Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(color: ABStyles.darkBlack, width: 2),
                ),
                child: Column(
                  children: [
                    const SizedBox(height: 10),
                    _buildUserInfoRow(),
                    const SizedBox(height: 20),
                    _buildWorksLayout(constraint.maxWidth),
                    _buildHotRow()
                  ],
                )
            ).paddingOnly(top: 30),
            if (idx != null && rankImage != null)
              Align(
                  alignment: const Alignment(1.07, -1.0),
                  child: Image.asset(rankImage, fit: BoxFit.cover, width: (constraint.maxWidth - 10)/3.0 + 20)
              ),
          ],
        );
      }
    );
  }

  Widget _buildHotRow() => Row(
    children: [
      const SizedBox(width: 20),
      Image.asset('images/ceramics_25.webp', width: 30),
      const SizedBox(width: 10),
      Text(works.boost.toString(), style: const TextStyle(fontSize: 20, color: ABStyles.darkBlack, fontFamily: "RacingSansOne",fontWeight: FontWeight.bold)),
      const Spacer(),
      TextButton(onPressed: _showBoostDialog, child: Image.asset('images/ceramics_67.webp')).size(height: 60)
    ],
  );

  Row _buildUserInfoRow() {
    double avatarSize = 40.0;
    return Row(
      children: [
        const SizedBox(width: 20),
        ABImage(url: works.avatarOss?.thumbUrl, placeholder: Icon(Icons.person, size: avatarSize)).size(width: avatarSize,height: avatarSize).borderRadius(20),
        const SizedBox(width: 10),
        Text(works.nickname)
      ],
    );
  }

  Widget _buildWorksLayout(double maxWidth) {
    var minSize = (maxWidth - 20)/3.0;
    var min2Size = (maxWidth - 10)/2.0;
    if (works.images.isEmpty || works.images == "null") {
      return const SizedBox();
    }
    var images = works.images.split(",");
    if (images.length == 1) {
      return ABImage(url:images[0], fit: BoxFit.cover).borderRadius(10);
    } else if (images.length == 2) {
      return Row(
        children: [
          ABImage(url:images[0], fit: BoxFit.cover,width: min2Size,height: min2Size).borderRadius(10).expand(),
          const SizedBox(width: 10),
          ABImage(url:images[1], fit: BoxFit.cover,width: min2Size,height: min2Size).borderRadius(10).expand(),
        ],
      );
    } else {
      return Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(
              width: 2*minSize + 10,
              height: 2*minSize + 10,
              child: ABImage(url:images[0], fit: BoxFit.cover)).borderRadius(10).expand(),
          const SizedBox(width: 10),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ABImage(url:images[1], fit: BoxFit.cover,width: minSize,height: minSize).borderRadius(10),
              const SizedBox(height: 10),
              ABImage(url:images[2], fit: BoxFit.cover,width: minSize,height: minSize).borderRadius(10),
            ],
          )
        ],
      );
    }
  }

  void _showBoostDialog() async {
    var boost = await Get.bottomSheet(
        const ABBoostDialog(), isScrollControlled: true);
    if (boost != null && boost is ABBoostGift) {
      if (ABSingleton.user!.availableCoins >= boost.coin) {
        await api.consumeCoin(boost.coin);
        works.boost += boost.coin;
        works.updateBoost();
        Get.find<ABHomeController>().loadData();
        Get.dialog(ABBoostSuccessDialog(boostGift: boost));
      } else {
        showAlert(title: 'Not enough coins', message: "Recharge?",cancelText: 'Cancel',onOk: () {
          Get.to(()=>const ABCoinShopPage());
        });
      }
    }
  }
}
